<template>
  <div class="uploadBox" v-if="$t">
    <div class="wrap">
      <div class="scrollTop">
        <div class="item" v-for="(item,index) in episodeList" :key="index" :class="{selected: index==selectIndex}" @click="selectMethod(index)">{{ item }}</div>
      </div>
      <div class="contBox">
        <div class="videosBox">
          <div class="videoItem" v-for="(item,index) in fileList" :key="index">
            <img v-if="shortForm.vhType==2" :src="item.coverPicture" class="pic" lazy>
            <img v-else :src="item.coverPicture" class="picVertical" lazy>
            <div class="cont">
              <div class="name wordClamp">{{ item.title&&setName(item.title) || item.tempTitle || item.bucket }}</div>
              <div class="status">
                <span class="status-epi" v-if="(item.videoFile && (item.dramaKey || item.isEdit))">{{ $t('short_data.video.episodes')+' '+(item.episode||1)}}</span>
                <el-icon class="warnIcon" v-else><component :is="oicon('el-icon-warning')" /></el-icon>
              </div>
              <div class="opration">
                <img src="icon/play_icon.png" v-if="(item.videoFile)" class="play" @click="selectMovieMethod(item,index)" >
                <img src="icon/edit_icon.png" v-if="(item.videoFile)" class="edit" @click="selectMovieMethod(item,index)" >
                <img src="icon/del_icon.png" v-if="$route.query.type=='edit'" class="del" @click="cancelButton(index)">
              </div>
              <div class="upload" v-if="item.status=='wait'">
                <span>{{ $t('short_data.video.uploading') }}</span>
                <el-progress :percentage="item.percentage"></el-progress>
              </div>
              <div class="upload" v-if="item.status=='fail'">
                <span>{{ $t('short_data.video.uploadFail') }}</span>
                <div class="btn">{{ $t('short_data.video.againBtn') }}</div>
              </div>
            </div>
          </div>
          <div class="uploadItem" @click="uploadVideo" v-if="$route.query.type=='edit'">
            <input multiple v-show="false" ref="fileRef" type="file" @change="inputFile">
            <el-icon class="addIcon"><component :is="oicon('el-icon-circle-plus')" /></el-icon>
            <span>{{ $t('short_data.video.addBtn') }}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 弹出框 -->
    <sCDialog :modelValue="dialogVisible" :showFullscreen="false" :showClose="false" width="70%" :close-on-click-modal="false" z-index="1000">
      <template v-slot:header>
        <span class="scdialog-title" v-if="dialogVisible">{{ $t('short_data.video.edit') }}</span>
      </template>
      <div class="cont" v-if="dialogVisible">
        <el-form :model="fileList[fIndex]" :rules="rules" ref="brandForm" label-width="auto" label-position="right" style="flex-wrap: wrap">
          <div class="item">
						<!-- <sc-cropper v-if="fileList[fIndex].coverPicture" :src="fileList[fIndex].coverPicture" compress="0.8" aspectRatio="0" ref="fpsImg" style="display: none !important;"></sc-cropper> -->
          </div>
          <div class="item">
            <label v-if="shortForm.vhType==1">{{ $t('short_data.video.cover') }}<span style="color: #888">{{ $t('short_data.video.imgTips') }}</span></label>
            <label v-else>{{ $t('short_data.video.cover') }}<span style="color: #888">{{ $t('short_data.uploadText') }}</span></label>
            <div class="fpsBox">
              <div class="scrollBox">
                <sc-upload v-model="fileList[fIndex].coverPicture" title="Upload" :disabled="disabled||showUpload" :action="action" @getFile="getFile" fileType="thumbnail" @onSuccess="headCallPoster" @handleRemove="handleRemove" :width="width" :height="height" :isUploadS3="true" :class="{imged: fileList[fIndex].imgIndex==-1}" @useMethod="useUploadPic" :isShowUseBut="isShowUseBut" :cropper="true" :showCropper="true" cropperType="image/jpeg" maxSize="2">
                  <div v-if="showUpload" class="el-upload--picture-card" @click="openUpload" style="width: 100%;height: 100%;">
                    <div class="file-empty">
                      <i class="el-icon-delete"></i>
                      <h4>{{$t('user_data.uploadPage')}}</h4>
                    </div>
                  </div>
                </sc-upload>
                <img class="img" v-for="(item,index) in fileList[fIndex].fpsList" :key="index" :src="item" :class="{imged: index == fileList[fIndex].imgIndex, imgVer: shortForm.vhType==2}" @click="selImg(index)">
              </div>
            </div>
          </div>
          <div class="item">
            <el-form-item :label="$t('short_data.video.title')" prop="title.en_US">
              <div class="item-add">
                <el-input v-model="fileList[fIndex].title.en_US" clearable :placeholder="$t('movie_data.form.en_US')" :disabled="disabled"></el-input>
                <el-popover
                  placement="bottom"
                  width="80"
                  trigger="click"
                  v-if="!disabled">
                  <div class="popBox">
                    <div class="popBox-list" v-for="item in langList.name" :key="item" @click="selName(item,1)">{{ item }}</div>
                  </div>
                  <template #reference>
                    <el-icon class="detail-add"><component :is="oicon('el-icon-circle-plus')" /></el-icon>
                  </template>
                </el-popover>
              </div>
            </el-form-item>
            <el-form-item label="&#12288;" prop="title.ja_JP" v-if="nameNum.indexOf('ja_JP')>=0">
              <el-input v-model="fileList[fIndex].title.ja_JP" clearable :placeholder="$t('movie_data.form.ja_JP')" :disabled="disabled"></el-input>
            </el-form-item>
            <el-form-item label="&#12288;" prop="title.zh_CN" v-if="nameNum.indexOf('zh_CN')>=0">
              <el-input v-model="fileList[fIndex].title.zh_CN" clearable :placeholder="$t('movie_data.form.zh_CN')" :disabled="disabled"></el-input>
            </el-form-item>
            <el-form-item label="&#12288;" prop="title.zh_TW" v-if="nameNum.indexOf('zh_TW')>=0">
              <el-input v-model="fileList[fIndex].title.zh_TW" clearable :placeholder="$t('movie_data.form.zh_TW')" :disabled="disabled"></el-input>
            </el-form-item>
          </div>
          <div class="item">
            <el-form-item :label="$t('short_data.video.description')" prop="description.en_US" >
              <div class="item-add">
                <el-input v-model="fileList[fIndex].description.en_US" clearable :placeholder="$t('movie_data.form.en_US')" :disabled="disabled"></el-input>
                <el-popover
                  placement="bottom"
                  width="80"
                  trigger="click"
                  v-if="!disabled">
                  <div class="popBox">
                    <div class="popBox-list" v-for="item in langList.desc" :key="item" @click="selName(item,2)">{{ item }}</div>
                  </div>
                  <template #reference>
                    <el-icon class="detail-add"><component :is="oicon('el-icon-circle-plus')" /></el-icon>
                  </template>
                </el-popover>
              </div>
            </el-form-item>
            <el-form-item label="&#12288;" prop="description.ja_JP" v-if="descNum.indexOf('ja_JP')>=0">
              <el-input v-model="fileList[fIndex].description.ja_JP" clearable :placeholder="$t('movie_data.form.ja_JP')" :disabled="disabled"></el-input>
            </el-form-item>
            <el-form-item label="&#12288;" prop="description.zh_CN" v-if="descNum.indexOf('zh_CN')>=0">
              <el-input v-model="fileList[fIndex].description.zh_CN" clearable :placeholder="$t('movie_data.form.zh_CN')" :disabled="disabled"></el-input>
            </el-form-item>
            <el-form-item label="&#12288;" prop="description.zh_TW" v-if="descNum.indexOf('zh_TW')>=0">
              <el-input v-model="fileList[fIndex].description.zh_TW" clearable :placeholder="$t('movie_data.form.zh_TW')" :disabled="disabled"></el-input>
            </el-form-item>
          </div>
          <div class="item">
            <el-form-item :label="$t('short_data.video.number')" prop="episode">
              <el-input v-model="fileList[fIndex].episode" type="number" clearable :disabled="disabled"></el-input>
            </el-form-item>
          </div>
          <div class="item">
            <el-form-item :label="$t('short_data.video.free')" prop="isFree">
              <el-radio v-model="fileList[fIndex].isFree" :label="true" :disabled="disabled">{{ $t('table_data.yes') }}</el-radio>
              <el-radio v-model="fileList[fIndex].isFree" :label="false" :disabled="disabled">{{ $t('table_data.no') }}</el-radio>
            </el-form-item>
          </div>
          <div class="item" v-if="!fileList[fIndex].isFree">
            <el-form-item :label="$t('table_data.currency.mov')" prop="price">
              <el-input v-model="fileList[fIndex].price" type="number" clearable :disabled="disabled"></el-input>
            </el-form-item>
          </div>
          <div class="item" v-if="!fileList[fIndex].isFree">
            <el-form-item :label="$t('short_data.video.isFreeTime')" prop="isFreeTime">
              <el-radio v-model="fileList[fIndex].isFreeTime" :label="true" :disabled="disabled" @input="resetFreeTime">{{ $t('table_data.yes') }}</el-radio>
              <el-radio v-model="fileList[fIndex].isFreeTime" :label="false" :disabled="disabled" @input="resetFreeTime">{{ $t('table_data.no') }}</el-radio>
            </el-form-item>
          </div>
          <div class="item" v-if="fileList[fIndex].isFreeTime&&!fileList[fIndex].isFree">
            <el-form-item :label="$t('table_data.time.freeTime')" prop="freeTime">
              <div class="freeTime">
                <el-button class="detailClass" icon="el-icon-remove" @click="delFreeTime">10s</el-button>
                <div class="timeClass">{{ freeTime }}</div>
                <el-button class="detailClass" icon="el-icon-circle-plus" @click="addFreeTime">10s</el-button>
              </div>
            </el-form-item>
          </div>
          <div class="item">
            <el-form-item :label="$t('short_data.formLabel.status')" prop="viewStatus">
              <el-radio v-model="fileList[fIndex].viewStatus" :label="1" :disabled="disabled">{{ $t('short_data.video.video') }}</el-radio>
              <el-radio v-model="fileList[fIndex].viewStatus" :label="2" :disabled="disabled">{{ $t('short_data.video.trailer') }}</el-radio>
              <el-radio v-model="fileList[fIndex].viewStatus" :label="3" :disabled="disabled">{{ $t('short_data.video.poster') }}</el-radio>
            </el-form-item>
          </div>
          <div class="item">
            <el-form-item :label="$t('short_data.video.openTime')" prop="openTime">
              <el-date-picker style="display: flex;justify-content: space-between;width:100%" v-model="fileList[fIndex].openTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" :disabled="disabled" :editable="false" :placeholder="$t('formRule.selectPlaceholder')"></el-date-picker>
            </el-form-item>
          </div>
        </el-form>
        <div class="videoplay" v-if="dialogVisible&&!isUploadNewShort">
          <video controls class="videoItem" @durationchange="durationchange" ref="uploadVideo" id="uploadVideo" crossorigin="anonymous" @pause="palyPause" @canplay="canplay" @timeupdate="onTimeupdate">
            <source :src="fileList[fIndex].videoFile"/>
            <track
              v-for="(item,index) in cationArr"
              :key="index"
              :label="item.label"
              kind="subtitles"
              :srclang="item.lang"
              :src="item.src"
              :default="item.default"
            />
          </video>
          <el-button type="primary" @click="rnewUploadVideo" >{{ $t('short_data.form.anewUploadShort') }}</el-button>
        </div>
        <div class="newUpload" v-if="isUploadNewShort">
          <span>{{ $t('short_data.video.uploading') }}</span>
          <el-progress :percentage="fileList[fIndex].percentage"></el-progress>
        </div>
      </div>
      <template v-slot:footer>
        <div class="footer">
          <el-button @click="dialogVisible=false" >{{$t('table_data.cancelText')}}</el-button>
          <el-button type="primary" :loading="isSaveing" @click="submit()" v-if="$route.query.type=='edit'">{{ $t('table_data.saveText') }}</el-button>
        </div>
      </template>
    </sCDialog>
  </div>
</template>

<script>
import "vue3-video-play/dist/style.css";
import { videoPlay } from "vue3-video-play";
import Hls from 'hls.js';

import sCDialog from "@/components/scDialog"

import { init, fileChange, getWorker } from "@/utils/awsSDK.js"
const s3ClientObj = {
  development: {
    endpoint: "https://s3.ap-northeast-1.amazonaws.com/video.dev.mov.movie/sourceFile", //存储文件的服务器的地址，无端口
    s3ForcePathStyle: true,
    signatureVersion: 'v4',
    region: 'ap-northeast-1',
    forcePathStyle: true,
    credentials: {
      accessKeyId: "AKIARHG2KXXR25WAOTML",
      secretAccessKey: "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",
    }
  },
  uat: {
    endpoint: "https://s3.ap-northeast-1.amazonaws.com/video.uat.mov.movie/sourceFile", //存储文件的服务器的地址，无端口
    s3ForcePathStyle: true,
    signatureVersion: 'v4',
    region: 'ap-northeast-1',
    forcePathStyle: true,
    credentials: {
      accessKeyId: "AKIARHG2KXXR25WAOTML",
      secretAccessKey: "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",
    }
  },
  production: {
    endpoint: "https://s3.ap-northeast-1.amazonaws.com/video.mov.movie/sourceFile", //存储文件的服务器的地址，无端口
    s3ForcePathStyle: true,
    signatureVersion: 'v4',
    region: 'ap-northeast-1',
    forcePathStyle: true,
    credentials: {
      accessKeyId: "AKIARHG2KXXR757SG2BM",
      secretAccessKey: "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",
    }
  }
}

// 抽帧
// import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';
// const ffmpeg = createFFmpeg({
//   corePath: "js/ffmpeg-core.js",
//   log: true
// });

// 截图
import html2canvas from "html2canvas"

  export default {
    components: {
      sCDialog,
      videoPlay,
      html2canvas,
      // scCropper
    },
    props: {
      allForm: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      var checkFileId = (rule, value, callback) => {
        if (!this.fileList[this.fIndex].coverPictureId) {
          return callback(new Error(this.$t('formRule.file_rule')));
        } else {
          callback()
        }
      };
      var checkPrice = (rule, value, callback) => {
        if (!this.fileList[this.fIndex].price || this.fileList[this.fIndex].price < 0) {
          return callback(new Error(this.$t('short_data.video.priceRule')));
        } else {
          callback()
        }
      };
      var checkEpisode = (rule, value, callback) => {
        if (!this.fileList[this.fIndex].episode || this.fileList[this.fIndex].episode <= 0) {
          return callback(new Error(this.$t('short_data.video.episodeRule')));
        } else {
          callback()
        }
      };
      return {
        isUploadContinueShort: true,
        isUploadNewShort: false,
        copyData: {},
        width: "90px",
        height: "127px",
        shortForm: {},
        itemImg: [],
        createImgIndex: false,
        maxEpisode: 10,
        action: '#',
        fIndex: 0,
        isShowUseBut: true,
        showUpload: false,
        disabled: false,
        files: null,
        bucketList: [],
        ffVideo: [],
        imgIndex: 0,
        videoFrames: [],
        langList: {
          name: [
            'ja_JP',
            'zh_CN',
            'zh_TW'
          ],
          desc: [
            'ja_JP',
            'zh_CN',
            'zh_TW'
          ]
        },
        videoForm: {},
        options: {
          playbackRate: [0.5, 0.75, 1, 1.5, 2], //传入倍速可选数组
          volume: 1,
          src: ''
        },
        hls: null,
        // 字幕
        cationArr: [
          {
            label: 'English',
            lang: 'en',
            src: '',
            default: false
          },
          {
            label: 'Japanese',
            lang: 'ja',
            src: '',
            default: true
          },
          {
            label: '中文简体',
            lang: 'zh',
            src: '',
            default: false
          },
          {
            label: '中文繁体',
            lang: 'zt',
            src: '',
            default: false
          }
        ],
        nameNum: [],
        descNum: [],
        freeTime: 0,
        form: {
          cover: '',
          coverId: '',
          title: {en_US: '',ja_JP: '',zh_CN: '',zh_TW: ''},
          description: {en_US: '',ja_JP: '',zh_CN: '',zh_TW: ''},
          episode: '',
          isFree: false,
          isFreeTime: false,
          viewStatus: 1,
          duration: 0,
          freeTime: 0,
          price: '',
          openTime: '',
          videoFileKey: '',
          videoFile: ''
        },
        drama: [],
        isSaveing: false,
        dialogVisible: false,
        fileList: [],
        addFile: [],
        selectIndex: 0,
        episodeList: [],
        rules: {
          "coverId": [
            {required: true, validator: checkFileId, trigger:'change'}
          ],
          "title.en_US": [
            {required: true,message: this.$t('formRule.inputPlaceholder'),trigger: 'blur'}
          ],
          "episode": [
            {required: true,validator: checkEpisode,trigger: 'blur'}
          ],
          "price": [
            {required: true,validator: checkPrice,trigger: 'blur'}
          ],
          "isFree": [
            {required: true,message: this.$t('formRule.selectPlaceholder'),trigger: 'change'}
          ],
          "openTime": [
            {required: true,message: this.$t('formRule.selectPlaceholder'),trigger: 'change'}
          ],
        }
      }
    },
    watch: {
      allForm: {
        handler: function(form) {
          this.shortForm = form;
          this.width = form.vhType==1?"120px":"90px";
          this.height = form.vhType==1?"68px":"127px";
          this.fileList = form.drama || [];   
        },
        immediate: true,
        deep: true
      },
      dialogVisible(){
        return function(e){
          if(!e&&this.fileList[this.fIndex].coverPictureId&&this.imgIndex==-1){
            this.imgIndex = 0
          }
        }
      }
    },
		computed: {
      // setTime() {
      //   return (e) => {
      //     if(this.isNotHandle)return;
      //     if(!this.fileList[this.fIndex])return this.$i18n.t('short_data.video.freeTimeValue', {hour: '00', minute: '00', second: '00'});
      //     let allSeconds = (Math.floor(e || this.fileList[this.fIndex].duration) / 1000);
      //     if(e == 0) {
      //       let _allSeconds = (Math.floor(e || this.fileList[this.fIndex].duration) / 1000) * 0.1;
      //       if(Math.floor(_allSeconds % 10) < 5)allSeconds = Math.floor(_allSeconds - Math.floor(_allSeconds % 10));
      //       if(Math.floor(_allSeconds % 10) >= 5)allSeconds = Math.floor(_allSeconds + Math.floor(_allSeconds % 10) + (10 - Math.floor(_allSeconds % 10)));
      //       if(allSeconds < 10) allSeconds = 10;
      //       this.fileList[this.fIndex].freeTime = allSeconds * 1000;
      //     }
      //     const time = this.$TOOL.formateTime(allSeconds);
      //     const timeArr = time.split(":");
      //     const hour = timeArr[0];
      //     const minute = timeArr[1];
      //     const second = timeArr[2];
      //     const text = this.$i18n.t('short_data.video.freeTimeValue', {hour: hour, minute: minute, second: second});
      //     return text;
      //   }
      // },
      setName(){
        return (e)=>{
          return e&&e[this.$i18n.locale]
        }
      },
			oicon(){
				return function(e){
					return e
				}
			},
		},
    async mounted(){
      this.disabled = this.$route.query.type=='detail' ? true : false;
      console.log('环境',process.env.NODE_ENV);
      const s3data = s3ClientObj[process.env.VUE_APP_SERVE];
      await init(s3data)
      try{
        this.$nextTick(()=>{
          this.hls = new Hls();
          this.getInfo()

        })
      }catch(e){
        console.log(e)
      }
    },
    methods: {
      rnewUploadVideo() {
        this.isUploadContinueShort = false;
        this.$refs.fileRef.dispatchEvent(new MouseEvent('click'));
      },
      setTime(e) {
        // return (e) => {
          if(!this.fileList[this.fIndex])return this.$i18n.t('short_data.video.freeTimeValue', {hour: '00', minute: '00', second: '00'});
          let allSeconds = (Math.floor(e || this.fileList[this.fIndex].duration) / 1000);
          if(e == 0) {
            let _allSeconds = (Math.floor(e || this.fileList[this.fIndex].duration) / 1000) * 0.1;
            if(Math.floor(_allSeconds % 10) < 5)allSeconds = Math.floor(_allSeconds - Math.floor(_allSeconds % 10));
            if(Math.floor(_allSeconds % 10) >= 5)allSeconds = Math.floor(_allSeconds + (10 - Math.floor(_allSeconds % 10)));
            if(allSeconds < 10) allSeconds = 10;
            this.fileList[this.fIndex].freeTime = allSeconds * 1000;
          }
          const time = this.$TOOL.formateTime(allSeconds);
          const timeArr = time.split(":");
          const hour = timeArr[0];
          const minute = timeArr[1];
          const second = timeArr[2];
          const text = this.$i18n.t('short_data.video.freeTimeValue', {hour: hour, minute: minute, second: second});
          this.freeTime = text;
        // }
      },
      resetFreeTime(e) {
        if(e.target.value == 'false')this.fileList[this.fIndex].freeTime = 0;
        if(e.target.value == 'true')this.setTime(0);
      },
      delFreeTime() {
        if(this.fileList[this.fIndex].freeTime <= 10000)return;
        this.fileList[this.fIndex].freeTime -= 10000;
        this.setTime(this.fileList[this.fIndex].freeTime);
        console.log('-', this.fileList[this.fIndex].freeTime)
      },
      addFreeTime() {
        const duration = this.fileList[this.fIndex].duration || 5 * 60 * 60 * 1000;
        if(this.fileList[this.fIndex].freeTime >= duration - 10000)return;
        this.fileList[this.fIndex].freeTime += 10000;
        this.setTime(this.fileList[this.fIndex].freeTime);
        console.log('+', this.fileList[this.fIndex].freeTime)
      },
			async getInfo(){
        this.episodeList = [];
        this.fileList = this.allForm.drama || [];        
        let listTotal = this.fileList.length;
        for(let i = 0;i <= (listTotal/this.maxEpisode); i++) {
          if(listTotal%this.maxEpisode == 0) {
            if(i == listTotal/this.maxEpisode) break;
            this.episodeList.push(`${i==0?'1':i*this.maxEpisode+1}-${i*this.maxEpisode+this.maxEpisode}`);
          } else {
            this.episodeList.push(`${i==0?'1':i*this.maxEpisode+1}-${i<parseInt(listTotal/this.maxEpisode)?i*this.maxEpisode+this.maxEpisode:(listTotal*this.maxEpisode)/this.maxEpisode}`)
          }
        }
        // 视频按照集数排序
        this.fileList.sort((a,b)=>{if(a.episode&&b.episode)return a.episode - b.episode > -1 ? 1 : -1})
        // for(let i=0;i<this.fileList.length;i++){
        //   let list = this.fileList[i];
        //   if(!list.dramaId&&list.fidList&&list.fidList.length){
        //     let picIndex = list.imgIndex || 2;
        //       const imgRes = await this.$API.shorts.getFileId.get(picIndex==-1?this.fileList[i].coverPictureId:this.fileList[i].fidList[picIndex]);
        //       this.fileList[i].coverPicture = imgRes.data
        //       this.fileList[i].isLoading = true
        //   }else{
        //     this.fileList[i].isLoading = true
        //   }
        // }
        // this.$emit('saveForm',{drama: this.fileList.map(n=>({...n,isLoading: null}))})
        console.log('视频页INFO',this.fileList)
      },
      selImg(index) {
        if(this.$route.query.type=='detail')return
        this.imgIndex = this.fileList[this.fIndex].imgIndex = index;
        this.isShowUseBut = true
        if(this.fileList[this.fIndex].fidList)this.fileList[this.fIndex].coverPictureId = this.fileList[this.fIndex].fidList[index];
        if(this.fileList[this.fIndex].fpsList)this.fileList[this.fIndex].coverPicture = this.fileList[this.fIndex].fpsList[index];
        console.log('修改img',this.fileList[this.fIndex].coverPicture);
      },
      // base64转file
      dataURLtoFile(dataurl, filename) {
        if(!dataurl)return
        let arr = dataurl.split(",");
        let mime = arr[0].match(/:(.*?);/)[1];
        let bstr = window.atob(arr[1]);
        let n = bstr.length;
        let u8arr = new Uint8Array(n);
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
        }
        return new File([u8arr], filename, { type: mime });
      },
      async uploadImg(param) {
        // console.log('开始上传...', param);

        const fileType = {
          image: 1,
          audio: 3,
          eBook: 4,
          other: 9,
          video: 2,
        };

        const fileCategory = {
          artwork: 1,
          attachment: 5,
          avatar: 3,
          bgImage: 4,
          certificate: 6,
          certificateThumbnail: 7,
          thumbnail: 2,
        };

        let data = {};

        for (let i = 0; i < param.type.split('/').length; i++) {
          if (['pdf', 'txt', 'xlsx'].includes(param.type.split('/')[i])) {
            data.type = 4;
          } else if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'tiff', 'bmp', 'svg'].includes(param.type.split('/')[i])) {
            data.type = 1;
          } else {
            data.type = fileType[param.type.split('/')[0]] ? fileType[param.type.split('/')[0]] : 9;
          }
        }

        data.file = param;
        data.category = fileCategory.thumbnail;

        let params = `?filename=${data.file.name}&category=${data.category}&type=${data.type}`;

        try {
          const res = await this.$API.common.setFile.get(params);
          if (res.path) {
            let fileData = new FormData();
            fileData.file = param;
            for (const key in param) {
              fileData.append(key, param[key]);
            }

            // const awsApiObj = config.awsApiObj;
            await this.$API.upload.awsUploadFile.put(res.path, fileData.file, { 'Content-Type': fileData.file.type });
            // console.log('上传剧集封面', res);
            return res.fileId;
          }
        } catch (err) {
          console.log('上传aws断开', err);
        }
      },
      useUploadPic(file){
        // console.log(11111,file)
        // this.form.coverPicture = file.tempFile;
        this.fileList[this.fIndex].coverPicture = file.url;
        this.fileList[this.fIndex].imgIndex = -1;
        this.isShowUseBut = false;
        this.imgIndex = -1;
      },
      async uploadVideo() {
        this.isUploadContinueShort = true;
        this.$refs.fileRef.dispatchEvent(new MouseEvent('click'));
      },
      getObjectURL(file) {
        var url = null ;
        if (window.createObjectURL!=undefined) { // basic
            url = window.createObjectURL(file) ;
        } else if (window.URL!=undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file) ;
        } else if (window.webkitURL!=undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file) ;
        }
        return url ;
      },
      // 获取视频时长
      async getDuration(file) {
        return new Promise((resolve, reject) => {
          if (!file) {
            return 0;
          }

          const video = document.createElement('video');
          video.preload = 'metadata';

          video.onloadedmetadata = function() {
            const duration = Math.floor(video.duration * 1000);
            resolve(duration);
          };

          video.onerror = function() {
            reject(0);
          };

          const objectUrl = URL.createObjectURL(file);
          video.src = objectUrl;

          // 确保在不再需要时撤销对象URL
          video.addEventListener('loadeddata', () => {
            URL.revokeObjectURL(objectUrl);
          });
        });
      },
      async inputFile(event) {
        this.files = event.target.files;
        if(this.files.length > 5){
          this.$message.error(this.$t('short_data.subtitle.maxUploadTips'))
          return
        }
        if(!this.isUploadContinueShort)this.isUploadNewShort = true;
        this.isUploadContinueShort = true;
        if(this.isUploadNewShort && this.files.length > 1){
          this.$message.error(this.$t('short_data.subtitle.maxUploadTips'))
          return
        }
        if(this.isUploadNewShort) {
          Object.assign(this.copyData, this.fileList[this.fIndex]);
          this.fileList.splice(this.fIndex, 1);
        }
        for (let i = 0; i < this.files.length; i++) {
          let bucketName = '' + new Date().getTime() + '';
          if (this.bucketList.indexOf(bucketName) >= 0) bucketName = bucketName + i
          let key = bucketName + "_test.mp4";
          if(this.isUploadNewShort) {
            this.bucketList.splice(this.fIndex, 0, bucketName);
            this.fileList.splice(this.fIndex, 0, {
              duration: await this.getDuration(this.files[i]),
              tempTitle: this.files[i].name||'wrong format',
              percentage: 0,
              status: 'wait',
              show: true,
              file: this.files[i],
              needSuspend: false,
              sharding: [],
              shardSize: 5 * 1024 * 1024,//每个分片的大小
              key: key,
              bucket: bucketName,
              fpsList: [],
              fidList: [],
              src: this.getObjectURL(this.files[i]),
              isEdit: false
            });
            this.addFile.splice(this.fIndex, 0, {
              percentage: 0,
              status: 'wait',
              show: true,
              file: this.files[i],
              needSuspend: false,
              sharding: [],
              shardSize: 5 * 1024 * 1024,//每个分片的大小
              key: key,
              bucket: bucketName
            });

            this.ffVideo.splice(this.fIndex, 0, {
              name: this.files[i].name,
              file: this.files[i],
              duration: 10
            })
          } else {
            this.bucketList.push(bucketName)
            this.fileList.push({
              duration: await this.getDuration(this.files[i]),
              tempTitle: this.files[i].name||'wrong format',
              percentage: 0,
              status: 'wait',
              show: true,
              file: this.files[i],
              needSuspend: false,
              sharding: [],
              shardSize: 5 * 1024 * 1024,//每个分片的大小
              key: key,
              bucket: bucketName,
              fpsList: [],
              fidList: [],
              src: this.getObjectURL(this.files[i]),
              isEdit: false
            });
            this.addFile.push({
              percentage: 0,
              status: 'wait',
              show: true,
              file: this.files[i],
              needSuspend: false,
              sharding: [],
              shardSize: 5 * 1024 * 1024,//每个分片的大小
              key: key,
              bucket: bucketName
            });

            this.ffVideo.push({
              name: this.files[i].name,
              file: this.files[i],
              duration: 10
            })
          }
        }
        this.forUploadFiles();
        this.$refs.fileRef.value = '';//清空value可以重复选择同一个文件
        
      },
      // 遍历执行上传
      forUploadFiles(){
        fileChange({ fileList: this.addFile, bucket: '', changeStatus: this.changeStatus, getSuspend: this.getSuspend, changeSharding: this.changeSharding })
        // console.log('上传中...',this.fileList)
      },
      // 继续上传
      async continuedButton(file) {
        file.needSuspend = false;
        file.status = 'wait';
        const isInQueue = getWorker(file.file);
        // console.log("isInQueue", isInQueue)
        if (isInQueue === false) {
          //如果任务队列中没有这个文件上传任务，那么就加入到任务队列中
          fileChange({ fileList: [file], bucket: file.bucket, changeStatus: this.changeStatus, getSuspend: this.getSuspend, changeSharding: this.changeSharding });
        }

      },
      // 清除文件
      async cancelButton(index) {
				this.$confirm(this.$i18n.t('table_data.del_text'), this.$i18n.t('table_data.tips'), {
					type: 'warning'
				}).then(() => {
          this.copyData = this.fileList[index];
				  this.$TOOL.data.set("EpisodeData", this.copyData);
          this.fileList.splice(index, 1);
				}).catch(() => {

				})
      },
      //获取该文件是否需要暂停
      getSuspend(key) {
        let suspend = this.fileList.filter(e => {
          return e.key === key;
        });
        if (suspend.length != 0) {
          return suspend[0].needSuspend;
        }
        return false;
      },
      // 修改状态
      async changeStatus(key, val, res) {
        for (let i = 0; i < this.fileList.length; i++) {
          if (this.fileList[i].key == key) {
            if (val === 'success' && !this.fileList[i].isEdit) {
              this.fileList[i].percentage = 100;
              let url = await this.getRealVideoUrl(res.Key)
              let data = {
                "dramaId": null,
                "title": {en_US: '',ja_JP: '',zh_CN: '',zh_TW: ''},
                "description": {en_US: '',ja_JP: '',zh_CN: '',zh_TW: ''},
                "coverPicture": this.fileList[i].coverPicture,
                "coverPictureId": this.fileList[i].coverPictureId,
                "episode": '',
                "isFree": false,
                "isFreeTime": false,
                "viewStatus": 1,
                "freeTime": 0,
                "duration": this.fileList[i].duration,
                "price": '',
                "openTime": '',
                "isEdit": false,
                "fpsList": [],
                "imgIndex": this.fileList[i].coverPictureId?2:-1,
                "isLoading": null,
                "sharding": [],
                "videoFileKey": res.Key,
                "videoFile": url,
                "status": 'success'
              };
              Object.assign(this.fileList[i], data);
              if(this.isUploadNewShort)this.selectMovieMethod(this.fileList[this.fIndex], this.fIndex);
              this.$emit('saveDraft',{drama: this.fileList},()=>{
              })
            }
            break;
          }
        }
        this.getInfo()
      },
      // 修改分片数组
      changeSharding(key, shard) {
        for (let i = 0; i < this.fileList.length; i++) {
          if (this.fileList[i].key === key) {
            this.fileList[i].sharding = shard;
            //改变进度条
            let size = 0;
            for (let j = 0; j < shard.length; j++) {
              size += shard[j].Size;
            }
            this.fileList[i].percentage = ((size / this.fileList[i].file.size) * 100).toFixed(1) - 0;
            return;
          }
        }
      },
      // 生成帧画面
      // async createFPS(index,ffVideo,uploadedIndex=-1){
      //   // let video = document.querySelector('#video');
      //   // let width = 100//500;
      //   // let height = 130//500 / (video.videoWidth / video.videoHeight);
      //   try {
      //     if(!ffmpeg.isLoaded())await ffmpeg.load()
      //     let { name, file, duration } = ffVideo;
      //     ffmpeg.FS("writeFile", name, await fetchFile(file));
      //     // 计算每秒需要抽的帧数
      //     let step = Math.ceil(20 / duration),
      //       allNum = Math.floor(step * duration);
      //     // console.log("step", step, allNum,width,height);
      //     await ffmpeg.run(
      //       "-i",
      //       name,
      //       "-r",
      //       `${step}`,
      //       "-ss",
      //       "0",
      //       "-vframes",
      //       `${allNum}`,
      //       "-f",
      //       "image2",
      //       "-s",
      //       `500*300`,
      //       "image-%02d.png"
      //     );
      //     for (let i = 0; i < allNum; i++) {
      //       let temp = i + 1;
      //       if (temp < 10) {
      //         temp = "0" + temp;
      //       }
      //       let buffer = ffmpeg.FS("readFile", "image-"+temp+".png")
      //       // if(i % 5 == 0 && this.videoFrames.length < 3)this.videoFrames.push('data:image/png;base64,'+this.arrayBufferToBase64(buffer));
      //       if(i % 5 == 0 && this.fileList[index].fpsList.length < 3){
      //         this.fileList[index].fpsList.push('data:image/png;base64,'+this.arrayBufferToBase64(buffer));
      //       }
      //     }
      //     if(this.fileList[index].fpsList.length)await this.uploadCover(index)
      //     if(index == this.fileList.length-1){
      //       this.forUploadFiles()
      //     }else{
      //       let i = index+1;
      //       this.createFPS(i,this.ffVideo[++uploadedIndex])
      //     }
      //     console.log('生成帧动画',this.fileList,index)
      //     // this.$emit("frame", this.videoFrames);
      //   } catch (err) {
      //     console.warn('解析帧动画出错',err)
      //     // if(index == this.fileList.length-1){
      //       this.fileList[index].fpsList = []
      //       this.forUploadFiles()
      //     // }else{
      //     //   let i = index+1;
      //     //   this.createFPS(i,this.ffVideo[++uploadedIndex])
      //     // }
      //   }
      // },
      // 获取真实视频链接
      async getRealVideoUrl(url){
        const response = await this.$API.shorts.getVideoFileId.get(url);
        return response.data
      },
      // 上传每集封面
      async uploadCover(){
        let i = 0;
        while(i < 3){
          let file = this.dataURLtoFile(this.itemImg[i],'episodeImg.png')
          let fid = await this.uploadImg(file);
          this.fileList[this.fIndex].fidList.push(fid);
          // if(i==2){
            const imgRes = await this.$API.shorts.getFileId.get(fid);
            this.fileList[this.fIndex].coverPicture = imgRes.data
            this.fileList[this.fIndex].fpsList.push(imgRes.data);
            this.fileList[this.fIndex].coverPictureId = fid
          // }
          i++;
        }

      },
      // buffer转base64
      arrayBufferToBase64 (buffer) {
        var binary = ''
        var bytes = new Uint8Array(buffer)
        var len = bytes.byteLength
        for (var i = 0; i < len; i++) {
          binary += String.fromCharCode(bytes[i])
        }
        return window.btoa(binary)
      },
      // 点击弹窗
      async selectMovieMethod(item,index){
        console.log('点击数据',item);
        this.fIndex = index;
        this.itemImg = [];
        this.createImgIndex = (this.fileList[this.fIndex].fpsList && this.fileList[this.fIndex].fpsList.length);
        this.dialogVisible = true;
        
        if(this.fileList[this.fIndex].fpsList && typeof(this.fileList[this.fIndex].fpsList) == 'string'){
          this.fileList[this.fIndex].fpsList = JSON.parse(this.fileList[this.fIndex].fpsList);
        }
        if(this.fileList[this.fIndex].freeTime != 0)this.setTime(this.fileList[this.fIndex].freeTime);
        this.descNum = this.nameNum = []
        for(let i in this.fileList[this.fIndex].description){
          if(this.fileList[this.fIndex].description[i] != ''){
            this.descNum.push(i)
          }
        }
        for(let t in this.fileList[this.fIndex].title){
          if(this.fileList[this.fIndex].title[t] != ''){
            this.nameNum.push(t)
          }
        }
				// const locaStoreData = this.$TOOL.data.get("EpisodeData");
        const resultData = {};
        Object.assign(resultData, this.copyData);
        if(resultData && this.isUploadNewShort) {
          // this.$alert(this.$t('table_data.alertContinue'), this.$t('table_data.tips'), {confirmButtonText: this.$t('table_data.alertContinueConfirmBtn')}).then((e)=>{
          //   if(e == 'confirm') {
              Object.assign(this.fileList[this.fIndex], {
                title: resultData.title,
                description: resultData.description,
                episode: resultData.episode,
                isFree: resultData.isFree,
                isFreeTime: resultData.isFreeTime,
                viewStatus: resultData.viewStatus,
                freeTime: resultData.freeTime,
                duration: resultData.duration,
                price: resultData.price,
                openTime: resultData.openTime
              });
              this.copyData = {};
              this.$TOOL.data.set("EpisodeData", null);
              this.isUploadNewShort = false;
            // }
          // }).catch(e=>{
          //   console.warn(e);
          // })
        }
      },
      selName(e,index){
        if(index==1)this.nameNum.push(e)
        if(index==2)this.descNum.push(e)
      },
      async submit(){
				// console.log('data:',this.form)
        if(!this.fileList[this.fIndex].coverPictureId){
          return this.$message.error(this.$t('short_data.subtitle.coverPic'))
        }
				this.$refs.brandForm.validate(async (valid) => {
					if (valid) {
            this.isSaveing = true;
            try {
              // let data = {
              //   "dramaId": this.fileList[this.fIndex].dramaId,
              //   "title": this.fileList[this.fIndex].title,
              //   "imgIndex": this.imgIndex,
              //   "coverPicture": this.fileList[this.fIndex].coverPicture,
              //   "coverPictureId": this.fileList[this.fIndex].coverPictureId,
              //   "episode": this.fileList[this.fIndex].episode,
              //   "description": this.fileList[this.fIndex].description,
              //   "isFree": this.fileList[this.fIndex].isFree,
              //   "price": this.fileList[this.fIndex].price,
              //   "openTime": this.fileList[this.fIndex].openTime,
              //   "isEdit": true,
              //   "status": 'success',
              //   "dStatus": this.fileList[this.fIndex].dStatus || null,
              //   "fidList": this.fileList[this.fIndex].fidList || [],
              //   "dramaKey": this.fileList[this.fIndex].dramaKey || null,
              //   "srtStatus": this.fileList[this.fIndex].srtStatus || null,
              //   "srtInitLang": this.fileList[this.fIndex].srtInitLang || null
              // };
              const data = [];
              Object.assign(data, this.fileList)
              data[this.fIndex].isEdit = true;
              data[this.fIndex].srtInitLang = data[this.fIndex].srtInitLang || 'en';
              data[this.fIndex].status = 'success';
              if(data[this.fIndex].fpsList && typeof(data[this.fIndex].fpsList) == 'object'){
                data[this.fIndex].fpsList = JSON.stringify(data[this.fIndex].fpsList);
              }
              console.log('修改剧集信息', data,data[this.fIndex].coverPicture)
              this.$emit('saveDraft',{drama: data},async (res)=>{
                console.log('callback+++', res);
                this.dialogVisible = false;
                await this.getInfo()
                this.isSaveing = false;
              })
              
            }catch(err){
              this.isSaveing = false;
              console.log(err)
            }
					}
				})
      },
      openUploadFile(){

      },
      onTimeupdate(){
        // let video = this.$refs.video;
        // this.timelineData.startMeddleTime = '2024-04-11 ' + this.$TOOL.formateTime(video.currentTime)
        // // console.log('时间更新',e)
      },
      canplay(){
        // let video = this.$refs.uploadVideo;
        // this.fileList[this.fIndex].freeTime = video.duration * 1000;
        if(this.createImgIndex < 3 && this.dialogVisible)this.createImg();
        
      },
      // 生成截图
      createImg(){
        let video = this.$refs.uploadVideo;
        const width = video.videoWidth;
        const height = video.videoHeight;
        console.log('宽高',width,height,video.offsetWidth,video.offsetHeight)
        html2canvas(document.querySelector("#uploadVideo"), {
          width: video.offsetWidth,
          height: video.offsetHeight,
          dpi: window.devicePixelRatio * 5 ,
          scale: 2, // 缩放
          useCORS: true, // 是否使用图片跨域，如何使本地图片不用配置
        }).then(canvas => {
          let dom = document.body.appendChild(canvas);
          dom.style.display = 'none';
          dom.style.width = video.offsetWidth + 'px';
          dom.style.height = video.offsetHeight + 'px';
          // a.style.display = 'none';
          document.body.removeChild(dom);
          // let blob = this.dataURLToBlob(dom.toDataURL('image/png'));
          
          this.itemImg.push(dom.toDataURL('image/png'))
          video.currentTime += 10
          this.createImgIndex += 1;
          if(this.createImgIndex >= 3){
            this.uploadCover()
            this.fileList[this.fIndex].imgIndex = 2
          }
          // a.setAttribute('href', URL.createObjectURL(blob));
          // //这块是保存图片操作  可以设置保存的图片的信息
          // a.setAttribute('download', this.form.theatreName||'cinema' + '.png');
          // document.body.appendChild(a);
          // a.click();
          // URL.revokeObjectURL(blob);
          // document.body.removeChild(a);
        });
      },
			dataURLToBlob(dataurl) {
				let arr = dataurl.split(',');
				let mime = arr[0].match(/:(.*?);/)[1];
				let bstr = atob(arr[1]);
				let n = bstr.length;
				let u8arr = new Uint8Array(n);
				while (n--) {
					u8arr[n] = bstr.charCodeAt(n);
				}
				return new Blob([u8arr], { type: mime });
			},
      // 视频暂停
      palyPause(){
        console.log('播放暂停')
        // this.getVideoTime();
      },
      selectMethod(index) {
        this.selectIndex = index;
      },
      handleRemove(){
        this.form.coverPicture = "";
        if(this.fileList[this.fIndex].fpsList) {
          this.imgIndex = 2
          this.fileList[this.fIndex].coverPicture = this.fileList[this.fIndex].fpsList[this.imgIndex];
          this.fileList[this.fIndex].coverPictureId = this.fileList[this.fIndex].fidList[this.imgIndex];
        }
      },
      getFile(file){
        this.isSaveing = true;
        this.fileList[this.fIndex].coverPicture = file.tempFile;
        this.fileList[this.fIndex].imgIndex = -1;
        this.imgIndex = -1;
        this.isShowUseBut = false;
      },
      async headCallPoster(res){
        if(!res)return
        this.isSaveing = false
        this.fileList[this.fIndex].coverPictureId = res;
        // 查回新上传图片
        const imgRes = await this.$API.shorts.getFileId.get(res);
        this.fileList[this.fIndex].coverPicture = imgRes.data;
        this.$message.success(this.$t('banner_data.uploadSuccessText'))
      },
    }
  }
</script>

<style lang="scss">
.popBox {
  width: 100%;
  .popBox-list {
    line-height: 30px;
  }
  .popBox-list:hover {
    background: #F8F5ED;
    cursor: pointer;
  }
}
.uploadBox {
  .scdialog-title {
    font-weight: 700;
    font-size: 20px;
  }
  .footer {
    display: flex;
    justify-content: center;
  }
  .cont {
    display: flex;
    justify-content: space-between;
    .el-form {
      width: 58%;
      .freeTime {
        display: flex;
      }
      .detailClass {
        border: 1px solid #BB9B51;
        color: #BB9B51;
      }
      .timeClass {
        border: 1px solid #CCCCCC;
        border-radius: 4px;
        padding: 0 10px;
        margin: 0 10px;
        overflow: hidden;
        width: 143px;
        text-align: center;
      }
      .item {
        color: #000;
        .fpsBox {
          // display: flex;
          margin: 12px 0;
          max-width: 520px;
          overflow-x: scroll;
          overflow-y: hidden;
          .scrollBox {
            width: max-content;
            overflow: hidden;
            padding-bottom: 5px;
            .sc-upload {
              float: left;
              margin-right: 10px;
            }
            .img {  
              margin-right: 10px;
              width: 120px;
              height: 68px;
              object-fit: contain;
              border-radius: 6px;
              float: left;
            }
            .imgVer {  
              margin-right: 10px;
              width: 90px;
              height: 127px;
              object-fit: contain;
              border-radius: 6px;
            }
            .imged {
              border: 1px solid #BB9B51;
              background: #e4e4e4;
            }
            .fpsBox-upload {
              width: 90px;
              height: 120px;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              border: 1px dashed #888;
              border-radius: 6px;
              background: #F6F8F9;
              font-size: 16px;
              color: #767676;
              cursor: pointer;
              .addIcon {
                margin-bottom: 10px;
                font-size: 30px;
                color: #767676;
              }
            }
          }
        }
        .item-add {
          display: flex;
          width: 100%;
          align-items: center;
          .detail-add {
            font-size: 30px;
            margin-left: 10px;
            cursor: pointer;
          }
        }
      }
    }
    .videoplay {
      margin-left: 20px;
      width: 40%;
      text-align: center;
      #uploadVideo{
        width: 100%;
        height: auto;
        background: #000;
      }
    }
    .newUpload {
      margin-left: 20px;
      width: 40%;
      text-align: center;
     }
  }
  .wrap {
    .contBox {
      width: 100%;
      height: 890px;
      overflow-y: scroll;
      margin-top: 20px;
      .videosBox {
        display: flex;
        flex-wrap: wrap;
        margin-top: 10px;
        margin-left: 10px;
        .videoItem {
          flex: 0 0 22%;
          margin-right: 40px;
          margin-bottom: 20px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          height: 154px;
          background: #fff;
          box-shadow: 0 0 5px 5px #eee;
          border-radius: 6px;
          padding: 5px;
          .pic {
            width: 95px;
            height: 134px;
            object-fit: cover;
            margin-right: 4px;
          }
          .picVertical {
            width: 134px;
            height: 75px;
            object-fit: cover;
            margin-right: 4px;
          }
          .cont {
            width: 65%;
            height: 130px;
            font-size: 16px;
            color: #333;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .name {
              font-size: 16px;
            }
            .status {
              .status-epi {
                color: #999;
                font-size: 12px;
              }
              .warnIcon {
                font-size: 26px;
                color: red;
              }
            }
            .opration {
              text-align: right;
              .play,.edit,.del {
                width: 22px;
                margin-left: 10px;
                cursor: pointer;
              }
            }
            .upload {
              color: #999;
              font-size: 14px;
              line-height: 30px;
              .btn {
                color: #BB9B51;
                line-height: 24px;
                text-decoration: underline;
              }
            }
          }
        }
        .videoItem:hover {
          border: 1px solid #BB9B51;
          box-shadow: 0 0 5px 5px #C88C0052;
        }
        .uploadItem {
          flex: 0 0 22%;
          margin-right: 40px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          height: 154px;
          border: 1px dashed #888;
          border-radius: 6px;
          background: #F6F8F9;
          font-size: 16px;
          color: #767676;
          cursor: pointer;
          .addIcon {
            margin-bottom: 10px;
            font-size: 30px;
            color: #767676;
          }
        }
      }

    }
    .scrollTop {
      width: 100%;
      height: 45px;
      background-color: #fff;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      overflow-x: scroll;
      overflow-y: hidden;
      .item {
        font-size: 16px;
        font-weight: 400;
        width: 100px;
        flex: 0 0 100px;
        margin-right: 20px;
        cursor: pointer;
        position: relative;
        display: flex;
        justify-content: center;
      }
      .selected {
        font-weight: 700;
        color: #BB9B51;
      }
      .selected::after {
        content: "";
        width: 24px;
        height: 6px;
        position: absolute;
        bottom: -8px;
        background: #BB9B51;
        border-radius: 4px;
      }
    }
  }
}
</style>


